<template>
  <a-modal
    v-model:open="visible"
    title="日前价格导入"
    @ok="handleOk"
    @cancel="handleCancel"
    :confirmLoading="loading"
  >
    <a-form :model="formState" ref="formRef" style="margin-top: 30px">
      <!--  <a-form-item
        label="选择日期："
        name="date"
        :rules="{
          required: true,
          message: '请选择日期',
          trigger: 'change',
        }"
      >
        <a-date-picker
          v-model:value="formState.date"
          class="w-full"
          :format="'YYYY-MM-DD'"
          placeholder="请选择日期"
          style="width: 50%"
        />
      </a-form-item> -->
      <a-form-item
        name="fileList"
        :rules="{
          required: true,
          message: '请上传文件',
          trigger: 'change',
        }"
      >
        <template v-slot:label>
          <span class="my-custom-label">上传文件</span>
          <span type="link" class="modelLink" @click="downLoadTep"
            >（下载模版）</span
          >
        </template>
        <a-upload
          v-model:file-list="formState.fileList"
          :before-upload="beforeUpload"
          :maxCount="1"
          accept=".xlsx,.xls,.csv"
          @change="handleUploadChange"
        >
          <a-button
            class="greenpPlainBtn"
            :loading="importLoading"
            size="small"
          >
            <upload-outlined />
            选择文件
          </a-button>

          <template #itemRender="{ file }">
            <div class="ant-upload-list-item-info">
              <span class="ant-upload-list-item-name">{{ file.name }}</span>
            </div>
          </template>
        </a-upload>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>

import { UploadOutlined } from "@ant-design/icons-vue"
const $api = inject("$api")
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
})
const visible = ref(props.visible)
watch(
  () => props.visible,
  (val) => {
    console.log("visible", val)
    visible.value = val
  }
)
const emit = defineEmits(["update:visible", "update:handleQuery"])

const formRef = ref()
const formState = ref({})
const loading = ref(false)
const importLoading = ref(false)
const fileList = ref([])

const handleOk = async () => {
  try {
    await formRef.value.validate()

    loading.value = true
    try {
      // TODO: 调用上传接口
      const formData = new FormData()
      formData.append("file", formState.value.fileList[0].originFileObj)

      const res = await $api.importDayPriceModel(formData)
      if (res && res.code === 0) {
        message.success("导入成功")
        emit("update:handleQuery")
      } else {
        console.log("111", res)
        message.error(res.msg || "导入失败")
      }

      handleCancel()
    } catch (error) {
      console.log("error", error)
      message.error("导入失败")
    } finally {
      loading.value = false
    }
    /*  */
  } catch (error) {
    console.error(error)
  } finally {
    loading.value = false
  }
}

const handleCancel = () => {
  formRef.value?.resetFields()
  formState.value.fileList = []
  emit("update:visible", false)
}

const beforeUpload = (file) => {
  importLoading.value = true
  const isExcel =
    file.type === "application/vnd.ms-excel" ||
    file.type ===
      "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
    file.name.endsWith(".csv")
  if (!isExcel) {
    message.error("只能上传Excel/CSV文件！")
    return false
  }
  return false
}

const handleUploadChange = (info) => {
  importLoading.value = false
}

const downLoadTep = () => {
  window.open(
    "https://ngp-cloud.oss-cn-shenzhen.aliyuncs.com/public/monitor/%E6%97%A5%E5%89%8D%E4%BB%B7%E6%A0%BC%E5%AF%BC%E5%85%A5%E6%A8%A1%E7%89%88.xlsx"
  )
}
</script>
<style lang="less" scoped>
.modelLink {
  color: #1890ff;
  cursor: pointer;
}
.greenpPlainBtn {
  color: #52c41a;
  border-color: #52c41a;
  &:hover {
    color: #52c41a;
    border-color: #52c41a;
  }
}
</style>
